<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-table size="mini" :data="mtb.data" border style="width: 100%" highlight-current-row>
          <el-table-column type="index"></el-table-column>
          <el-table-column v-for="(v,i) in mtb.columns" align="center" :key="i" :prop="v.field" :label="v.title" :width="v.width">
            <template slot-scope="{row}">
              <span v-if="row.isSet">
                  <el-input size="mini" :placeholder="'请输入'+v.title" v-model="mtb.sel[v.field]"></el-input>
              </span>
              <span v-else>{{row[v.field]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
                            <span class="el-tag el-tag--success el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
                                {{scope.row.isSet?'保存':"修改"}}
                            </span>
              <span v-if="!scope.row.isSet"  @click="handleDelete(scope.$index, scope.row)" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">
                                删除
                            </span>
              <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                                取消
                            </span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {disableBtn, df, $err, $suc, ERRS, SUCS,$msg} from '@/utils'

export default {
  name: 'InlineEditTable',
  data() {
    return {
      count:1,
      mtb: {
        data: [], //数据
        sel: null,//选中行
        columns: [  //表头->字段
          { field: "type", title: "远程类型", width: 120 },
          { field: "addport", title: "连接地址", width: 150 },
          { field: "user", title: "登录用户", width: 120 },
          { field: "pwd", title: "登录密码", width: 220 },
          { field: "info", title: "其他信息" }
        ],
      },


    }
  },
  created() {
  },
  methods: {
    generateId(){
      console.log(this.count++)
      // return ((+new Date()) + "_" + (this.count++))
      return this.count++
    },
    //读取表格数据
    readMasterUser() {
      //根据实际情况，自己改下啊
      this.mtb.data.map(i => {
        i.id = this.generateId();//模拟后台插入成功后有了id
        i.isSet=false;//给后台返回数据添加`isSet`标识
        return i;
      });
    },
    //添加账号
    addMasterUser() {
      for (let i of this.mtb.data) {
        if (i.isSet) return this.$message.warning("请先保存当前编辑项");
      }
      let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true };
      this.mtb.data.push(j);
      this.mtb.sel = JSON.parse(JSON.stringify(j));
    },
    //修改
    pwdChange(row, index, cg) {
      console.log('pwdChange',row, index, cg)
      //点击修改 判断是否已经保存所有操作
      for (let i of this.mtb.data) {
        if (i.isSet && i.id != row.id) {
          this.$message.warning("请先保存当前编辑项");
          return false;
        }
      }
      //是否是取消操作
      if (!cg) {
        if (!this.mtb.sel.id)
          this.mtb.data.splice(index, 1);
        return row.isSet = !row.isSet;
      }
      //提交数据
      if (row.isSet) {
        //项目是模拟请求操作  自己修改下
        (() =>{
          let data = JSON.parse(JSON.stringify(this.mtb.sel));
          for (let k in data)
            row[k] = data[k];
          SUCS('保存成功!')
          //然后这边重新读取表格数据
          this.readMasterUser();
          row.isSet = false;
        })();
      } else {
        this.mtb.sel = JSON.parse(JSON.stringify(row));
        row.isSet = true;
      }
    },

    handleDelete(index, row) {
      console.log(index, row);
    }

  }
}
</script>

<style scoped>
  .el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
  }

</style>
